<template>
  <div class="group-info">
    <div class="group-info" v-if="detailAll.isGroup">
      <div v-if="detailAll.groupBuy_num>1 && detailAll.groupBuy_left && detailAll.showButton==1">
        <div class="middle-info-item">
          <section class="group_buy_status">{{detailAll.groupBuy_status}}</section>

          <section class="group_member">
            <ul class="clearfix">
              <li v-if="detailAll.tuan_order && detailAll.info.aggregation_type==1">
                <img :src="tuan_order.avatar" />
                <b></b>
              </li>
              <li v-for="(item, index) in detailAll.groupShoppingOrder" :key="index">
                <img :src="item.avatar" alt />
              </li>
            </ul>
          </section>
          <section>
            <template v-if="detailAll.info.small_group_type==1">
              <wx-button open-type="share" id="fxBtn-share" class="btn invite-btn">邀请新人参团</wx-button>
            </template>
            <template v-else>
              <wx-button open-type="share" id="fxBtn-share" class="btn invite-btn" >邀请好友参团</wx-button>
            </template>
          </section>
        </div>
      </div>

      <div v-else>
        <div class="middle-info-item" v-if="detailAll.info.rule || detailAll.show_invite==1">
          <section class="group_goods_rule" v-if="detailAll.info.rule">活动规则：{{detailAll.info.rule}}</section>

          <section v-if="detailAll.show_invite==1">
            <template v-if="detailAll.info.small_group_type==1">
              <wx-button open-type="share" id="fxBtn-share" class="btn invite-btn">邀请新人参团</wx-button>
            </template>
            <template v-else>
              <wx-button open-type="share" id="fxBtn-share" class="btn invite-btn">邀请好友参团</wx-button>
            </template>
          </section>
        </div>

        <!-- 非阶梯团 -->
        <!-- 大团 -->
        <section class="big_group" v-if="detailAll.info.aggregation_type!=2">
          <section class="show_pro middle-info-item" v-if="detailAll.info.aggregation_type=='0'">
            <section class="show_pro_info">
              <span class="title">参团信息</span>
              <!-- <span class="btn stepType_btn j_bigGroup_btn fr"><a href="javascript:;" data-type="buy">立即参团</a></span> -->
              <van-button round class="btn" @click="handleOpenSkuGroup(detailAll.item_detail)">立即参团</van-button>
            </section>

            <section class="show_pro_con">
              <div class="group_pic">
                <div class="pic" v-for="(img,index) in detailAll.user_img" :key="index">
                  <img :src="img.headimgurl" alt />
                </div>
                <div
                  class="pic default-pic"
                  v-if="detailAll.img_length<2 || detailAll.img_length==0"
                >
                  <img src="https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg" alt />
                </div>
              </div>
              <div class="group_count">
                <span class="count">
                  <i>{{detailAll.count}}</i>人参团
                </span>
                <span class="over_pro">
                  <i>{{detailAll.info.startTime}}</i> 至
                  <i>{{detailAll.info.endIime}}</i>
                </span>
              </div>
            </section>
          </section>
        </section>

        <!-- 阶梯团 -->
        <section class="group_StepType middle-info-item" v-else>
          <section class="step_price">
            <div class="title">拼团价</div>
            <div class="step_price_info">
              <div
                class="step_price_item"
                v-for="(ladder_price_vo,index) in detailAll.ladder_price"
                :key="index"
                :class="[ladder_price_vo.now==1?'cur':'','col'+detailAll.ladder_price.length]"
              >
                <div>{{ladder_price_vo.num}}人以上</div>
                <div class="price">
                  <span v-html="scaleGoodsPriceFn(ladder_price_vo.price)"></span>
                  <span class="mark">（当前价）</span>
                </div>
              </div>
            </div>
          </section>
          <section class="show_pro">
            <section class="show_pro_info">
              <span class="title">人越多越优惠</span>
              <!-- <span class="btn stepType_btn J_stepType_btn fr" data-type="buy">立即参团</span> -->
              <van-button round class="btn" @click="handleOpenSkuGroup(detailAll.item_detail)">立即参团</van-button>
            </section>
            <section class="show_pro_con">
              <div class="group_pic">
                <div class="pic" v-for="img in detailAll.user_img" :key="img.headimgurl">
                  <img :src="img.headimgurl" alt />
                </div>
                <div class="pic" v-if="detailAll.img_length<2 || detailAll.img_length==0">
                  <img src alt />
                </div>
              </div>
              <div class="group_count">
                <span class="count">
                  <i>{{detailAll.count}}</i>人参团
                </span>
                <span class="over_pro">
                  <i>{{detailAll.info.startTime}}</i> 至
                  <i>{{detailAll.info.endIime}}</i>
                </span>
              </div>
            </section>
          </section>

          <!-- <section class="stepType_action">
            <div v-if="detailAll.info.start_time>nowTime">
              <a href="javascript:;" class="J_stepType_btn" data-type="add_ladder">&yen;<span>{{detailAll.info.itemInfo.price}}</span>单独购买</a>
              <a href="javascript:;" class="stepType_btn J_stepType_btn" data-type="buy" style="display: inline-block;">立即参团</a>
            </div>
            <div v-else>
              <input type="hidden" name="stepType" value="1">
              <a href="javascript:;" class="stepType_btn J_stepType_btn" data-type="buy" style="width: 100%;">立即参团</a>
            </div>
          </section>-->
        </section>
        <!-- <if condition="I('get.tuanId') AND $tuan_order">
        <section class="group_member" v-if="detailAll.tuanId && detailAll.tuan_order">
          <ul class="clearfix">
            <if condition="$tuan_order AND $info['aggregation_type'] eq 1 AND $tuanOrderId gt 0">
              <li><img src="{$tuan_order.avatar}"><b>团</b></li>
            </if>
            <foreach name="groupShoppingOrder" item="order_vo">
              <li>
                <img src="<if condition=" $order_vo['avatar']">{$order_vo.avatar}
                <else />__MOBIMG__/groupshop/default_bg.png
            </if>">
            <if condition="$order_vo['serial'] eq 2 AND $info['aggregation_type'] eq 1">
              <b>参</b>
            </if>
            </li>
            </foreach>
          </ul>
        </section>-->
        <section class="middle-info-item" v-if="tuanId && detailAll.tuan_order">
          <section class="group_member no-margin">
            <ul class="clearfix">
              <li v-if="detailAll.tuan_order && detailAll.info.aggregation_type==1">
                <img :src="detailAll.tuan_order.avatar" />
                <b></b>
              </li>
              <li v-for="(item,index) in detailAll.groupShoppingOrder" :key="index">
                <img :src="item.avatar" alt />
                <!-- <b v-if="item.serial==2 && detailAll.info.aggregation_type==1">参</b> -->
              </li>
            </ul>
          </section>
        </section>
      </div>

      <!-- 多商品拼团 -->
      <section
        class="groups_combination middle-info-item"
        v-if="detailAll.item_group && detailAll.item_group.length>0"
      >
        <div class="groups_combination_title">
          <div class="title">{{detailAll.item_group_title}}</div>
          <div class="groups_all">
            <a @click="openLink(detailAll.item_group_link)">
              全部商品({{detailAll.item_group_counts}})
              <span class="icon">
                <!-- <svg-icon icon-class="icon_right" /> -->
                <!-- TODO svg切换 -->
                <i class="icon-right"></i>
              </span>
            </a>
          </div>
        </div>
        <ul class="groups_goods_list">
          <li class="goods_item" v-for="(item_group_vo, index) in detailAll.item_group" :key="index">
            <a @click="openLink(item_group_vo.link)">
              <div class="goods_img">
                <img
                  :src="item_group_vo.pic+'480x480'"
                  :alt="item_group_vo.title"
                  v-if="item_group_vo.is_compress==1"
                />
                <img :src="item_group_vo.pic" :alt="item_group_vo.title" v-else />
              </div>
              <div class="goods_title">{{item_group_vo.title}}</div>
              <van-button plain hairline class="groups_icon">一起拼</van-button>
              <div class="goods_price">
                <i>¥</i>
                {{item_group_vo.price}}
              </div>
            </a>
          </li>
        </ul>
      </section>

      <!-- 拼团玩法 -->
      <section class="groups_operate middle-info-item">
        <div class="title">拼团玩法</div>
        <ul>
          <li class="current">
            <i>1</i>
            <span>选择商品</span>
          </li>
          <li :class="detailAll.is_unfinished || (tuanId && detailAll.tuan_order)?'current':''">
            <i>2</i>
            <span>支付参与</span>
          </li>
          <li :class="detailAll.is_unfinished || (tuanId && detailAll.tuan_order)?'current':''">
            <i>3</i>
            <span>参团支付</span>
          </li>
          <li>
            <i>4</i>
            <span>拼团成功</span>
          </li>
        </ul>
        <!-- <li <if condition="$is_unfinished OR (I('get.tuanId') AND $tuan_order)">class="current"</if>><i>2</i><span>支付参与</span></li>
          <li <if condition="$is_unfinished OR (I('get.tuanId') AND $tuan_order)">class="current"</if> ><i>3</i><span>参团支付</span></li>
          <if condition="$info['aggregation_type'] eq 2">
            <li><i>4</i><span>拼团成功</span></li>
            <else />
            <li><i>4</i><span>拼团成功</span></li>
        </if>-->
      </section>

      <!-- 参与其他团 -->
      <group-more
        :detailAll="detailAll"
        v-if="detailAll.other_group &&detailAll.other_group.length>0"
      ></group-more>

      <!-- <section class="groups_otherroll middle-info-item" v-if="detailAll.other_group &&detailAll.other_group.length>0">
        <div class="group_detail_title">
          <span class="title"><span class="total_num">{{detailAll.other_group.length}}</span>人正在拼单，可直接参与</span>
          <span class="more_btn" @click="handleOpenGroupDialog">查看更多<span class="icon"><svg-icon icon-class="icon_right" /></span></span>
        </div>

        <div class="nearby_group_detail_wrap">
          <div class="item" v-for="(group,index) in detailAll.other_group" :key="index">
            <div class="nearby_group_detail" v-if="index<2">
              <div class="group_detail_img">
                <img :src="group.avatar">
              </div>
              <div class="nearby_g_owner">{{group.nickName}}</div>
              <div class="group_detail_content">
                <div class="nearby_g_left_user_num" v-if="group.type==1">还差<span class="number">{{group.last_num}}人</span>成团</div>
                <div class="nearby_g_left_user_num" v-else-if="group.type==2">还差<span class="number">{{group.last_num}}件</span>成团</div>
                
                <div class="nearby_g_left_time">
                  剩余
                  <span class="j_nearby_endtime nearby_endtime" v-if="detailAll.info.is_success_auto==1" data-endtime="{$group.last_end_time}"></span>
                  <span class="j_nearby_endtime nearby_endtime" v-else-if="detailAll.info.is_success_auto==0" data-endtime="{$info.endIime}"></span>
                  结束
                </div>
              </div>
              <van-button round class="btn" :url="group.url">去参团</van-button>
            </div>
          </div>
        </div>
      </section>-->
    </div>
    <!-- 拼团sku -->
    <sku-dialog-group :visible.sync="skuGroupVisible" :detailAll="detailAll" :itemId="itemId"></sku-dialog-group>
    <!-- 邀请 -->
    <share-image ref="shareImage"></share-image>
  </div>
</template>


<script>
import Vue from "vue";
import skuDialogGroup from "../../../../components/skuDialogGroup"; // 拼团sku弹窗
import groupMore from "../../../../components/groupMore";
import shareImage from "@/components/wxShare/shareImage";
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    detailAll: {
      type: Object,
    },
    itemId: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {
    skuDialogGroup,
    groupMore,
    shareImage,
  },
  data() {
    return {
      skuGroupVisible: false,
    };
  },
  created() {
    // console.log(this.itemId);
  },
  beforeDestroy() {
    // TODO 页面销毁前销毁所有监听事件
    this.$off()
  },
  methods: {
    openLink(url){
      openPage(url)
    },
    // 邀请好友参团
    clickShare() {
      this.$refs.shareImage.showShade = true;
    },
    /**
     * 打开拼团SKU弹窗
     */
    handleOpenSkuGroup(data) {
      // 打开sku弹窗
      this.skuGroupVisible = true;
      // this.itemId = Number(data.item_id)
    },
  },
});
</script>

<style></style>